import React, { Component } from 'react';
import { cate_list, cateBanner_list, threeCate_list, car_list, car_add } from "../../../api/index";
// import { CapsuleTabs } from 'antd-mobile'
import '../../../styles/index/cate/List.scss'
import '../../../assets/font/iconfont.css'
import { withRouter } from 'react-router-dom';

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id1: [],
      index1: [],
      index2: [],
      wu: 1,
      list1: [],
      list2: [],
      list3: [],
      list4: []
    }
  }
  async componentDidMount() {
    // 一级分类列表
    var res = await cate_list()
    this.setState({ list1: res.data })
    // 二级分类列表
    var res2 = await cate_list({ id: 1 })
    // console.log(res2.data[0]);
    this.setState({ list2: res2.data[0].twoCate })
    // console.log(this.state.list2);
    // 分类页广告
    var res3 = await cateBanner_list()
    // console.log(res3.data.pic);
    this.setState({ list3: res3.data.pic })
    // 三级分类列表
    var res4 = await threeCate_list()
    // console.log(res4.data[0].goods);
    this.setState({ list4: res4.data[0].goods })
  }
  // 一级菜单高亮
  async qeihuan1(item, index) {
    // 将小分类高亮重置
    this.setState({ index2: 0 })
    this.setState({ index1: index })
    // 获取分类列表
    var res2 = await cate_list({ id: item.id })
    this.setState({ list2: res2.data[0].twoCate })
    console.log(res2.data[0].twoCate[0].id2);
    // 获取大分类的第一个小分类
    var res4 = await threeCate_list({ id: res2.data[0].twoCate[0].id2 })
    this.setState({ list4: res4.data[0].goods })
  }
  // 二级菜单高亮
  async qeihuan2(item, index) {
    this.setState({ index2: index })
    // console.log(item.id2);
    var res4 = await threeCate_list({ id: item.id2 })
    if (res4.data.length != 0) {
      this.setState({ wu: 1 })
      this.setState({ list4: res4.data[0].goods })
      console.log(this.state.list4);
    }
    else {
      this.setState({ wu: 0 })
    }
  }
  // 去详情页

  // 加入购物车
  async addCar(item) {
    console.log(item);
    var res = await car_list()
    console.log(res.data);
    var i = res.data.findIndex((item2) => {
      return item2.shopid == item.id
    })
    if (i == -1) {
      var res2 = await car_add({ shopid: item.id, name: item.name, introduce: item.introduce, pic: item.pic, price: item.price, num: 1, state: false })
      console.log(res2);
      if (res2.status === 201) {
        console.log("加入购物车成功");

      }
    }
    else {
      console.log("商品已经在购物车了");
    }
  }
  go(item) {
    console.log(item);
    this.props.history.push({ pathname: '/good', state: { id: item.id } })
  }

  render() {
    return (
      <div className='list2'>
        <div className="cate2">
          {
            this.state.list1.map((item, index) => {
              return (
                <figure className={'item2 ' + (this.state.index1 == index ? 'active1' : '')} key={index} onClick={() => { this.qeihuan1(item, index) }}  >
                  <figcaption className='tu2'>
                    <img src={item.pic} alt="" />
                  </figcaption>
                  {item.name}
                </figure>
              )
            })
          }
        </div>
        <div className="main2">
          <div className="left2">
            {
              this.state.list2.map((item, index) => {
                return (
                  <div className={'item22 ' + (this.state.index2 == index ? 'active2' : '')} onClick={() => { this.qeihuan2(item, index) }} key={index}>
                    <div className={"xiao2 " + (this.state.index2 == index ? 'active22' : '')}>
                      {item.name2}

                    </div>
                  </div>
                )
              })
            }
          </div>
          <div className="right2">
            <div className="tu22">
              <img src={this.state.list3} alt="" />
            </div>
            {
              this.state.wu == 1 ?
                <div className="list22">
                  <div className='top22'>
                    <p className='zuo22'>推荐</p>
                    <p className='you22'>
                      <span className='aaaaa'>销量</span>
                      <span>价格</span>
                    </p>
                  </div>
                  <div className="main22" >
                    {
                      this.state.list4.map((item, index) => {
                        return (
                          <div className="item23" onClick={() => { this.go(item) }} key={index} >
                            <div className="zuo23">
                              <img src={item.pic} alt="" />
                            </div>
                            <div className="you23">
                              <p className='p21'>{item.name}</p>
                              <p className='p22'>{item.introduce}</p>
                              <p className='p23'>
                                <span>￥{item.price}</span>
                                <span className="iconfont icon-gouwuche" onClick={() => { this.addCar(item) }} ></span>
                              </p>
                            </div>
                          </div>

                        )
                      })
                    }
                  </div>
                </div> :
                <div className="wu">
                  该分类目前没有商品！
                </div>
            }
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(List);